<style lang='scss'>
	.add-user-page {
		.user-form {
			.el-form-item {
				&:first-child {
					margin-right: 18%;
				}
				.el-date-editor {
					width: 100%;
					.el-input__inner {
						padding-left: 30px;
						padding-right: 0px;
					}
				}
				.el-select, .el-cascader {
					width: 100%;
					.el-input__inner {
						padding-right: 15px;
					}
				}
			}
			.submit-btn {
				width: 26%;
				direction: ltl;
			}
		}
	}
</style>
<template>
	<el-card class="add-user-page">
	  <div slot="header">
	    <span>添加用户</span>
	  </div>
	  <div>
  		<el-form class="user-form cus-form card-form">
  			<div class="row">
  				<el-form-item label="工号" class="required">
		  			<cusInput maxlength=8 :v_input.sync="form_data.id_num"></cusInput>
		  		</el-form-item>
		  		<el-form-item label="姓名" class="required">
		  			<cusInput maxlength=8 :v_input.sync="form_data.name" :no_chinese="false"></cusInput>
		  		</el-form-item>
  			</div>
  			<div class="row">
  				<el-form-item label="出生" class="required">
		  			<el-date-picker
				      v-model="form_data.birthdate"
				      type="date"
				      value-format="timestamp"
				      :picker-options="birthdateData"
				      placeholder="选择日期">
				    </el-date-picker>
		  		</el-form-item>
		  		<el-form-item label="性别" class="required">
		  			<el-select v-model="form_data.sex" placeholder="请选择">
					    <el-option label="男" value="1"></el-option>
					    <el-option label="女" value="2"></el-option>
					  </el-select>
		  		</el-form-item>
  			</div>
  			<div class="row">
  				<el-form-item label="电话">
		  			<cusInput maxlength=11 :v_input.sync="form_data.phone"></cusInput>
		  		</el-form-item>
		  		<el-form-item label="邮箱">
		  			<cusInput maxlength=26 :v_input.sync="form_data.email"></cusInput>
		  		</el-form-item>
  			</div>
  			<div class="row">
  				<el-form-item label="职位" class="required">
		  			<el-cascader
					    expand-trigger="hover"
					    filterable
					    placeholder="可搜索"
					    :props="{value:'id',label:'name',children:'jobs'}"
					    v-model="job_selected_arr"
					    :options="jobs">
					  </el-cascader>
		  		</el-form-item>
		  		<el-form-item label="状态" class="required">
		  			<el-select v-model="form_data.status" placeholder="请选择">
					    <el-option label="在职" value="1"></el-option>
					    <el-option label="离职" value="0"></el-option>
					  </el-select>
		  		</el-form-item>
  			</div>
  			<el-form-item label="备注">
  				<cusInput maxlength=36 type="textarea" :v_input.sync="form_data.remark" :no_chinese="false"></cusInput>
  			</el-form-item>
  			<div class="row">
  				<p class="remark-text error-remark-text" style="flex-grow: 1;"><i class="el-icon-warning"></i>用户添加后出生日期不能再被修改</p>
  				<el-button type="primary" class="submit-btn" :loading="btn_submit_loading" @click="createUser">添加</el-button>
  			</div>
  		</el-form>
	  </div>
	</el-card>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	import { verifyPhone, verifyMailbox } from 'assets/js/utils.js';
	export default {
		data() {
			return {
				form_data: {
					id_num: '',
					name: '',
					birthdate: '',
					sex: '1',
					phone: '',
					email: '',
					job_id: '',
					status: '1',
					remark: ''
				},
				job_selected_arr: [],
				jobs: [],
				btn_submit_loading: false,
				birthdateData: {
					disabledDate: function(date) {
          	return date.getTime() > new Date(new Date().toLocaleDateString()).getTime();
          }
				}
			}
		},
		watch: {
			job_selected_arr(new_val) {
				this.form_data.job_id = new_val[new_val.length-1];
			}
		},
		methods: {
			initForm() {
				for(let item in this.form_data) {
					this.form_data[item] = item=='sex'||item=='status' ? '1' : '';
				}
				this.job_selected_arr = [];
			},
			createUser() {
				let t_form_data = this.form_data;
				if(t_form_data.id_num!='' && t_form_data.name && t_form_data.birthdate && t_form_data.sex!=''&&t_form_data.job_id&&t_form_data.status!='') {
					var send_data = {id_num:t_form_data.id_num,name:t_form_data.name,birthdate:t_form_data.birthdate,sex:t_form_data.sex,job_id:t_form_data.job_id,status:t_form_data.status};

					var error_info = '';
					if(t_form_data.phone) {
						error_info = verifyPhone(t_form_data.phone);
						send_data.phone = t_form_data.phone;
					}
					if(t_form_data.email) {
						error_info = verifyMailbox(t_form_data.email);
						send_data.email = t_form_data.email;
					}
					if(error_info) {
						this.$message.error(error_info);
						return;
					}

					this.btn_submit_loading = true;
					if(t_form_data.remark) send_data.remark = t_form_data.remark;
					this.$axios.post('/admin/addUser', send_data).then(res=>{
						if(res.s == 1) {
							this.$message.success('添加成功');
							this.initForm();
						}
					}).finally(()=>{
						this.btn_submit_loading = false;
					})
				}else {
					this.$message.error('缺少必填数据');
				}
			}
		},
		created() {
			this.$axios.get('/admin/getDepartment').then(res => {
				if(res.s == 1) {
					this.jobs = res.d;
				}
			})
		},
		components: {
			cusInput
		}
	}
</script>